{extend name="user/base" /} {block name="main"}
<div id="app">
  <el-row class="frontend-footer-brother" justify="center">
    <el-col class="user-layouts" :span="16" :xs="24">
      {include file="user/left" /}
      <el-main class="layout-main">
        <div class="user-views">
          <el-card
            class="user-views-card"
            shadow="hover"
            header="{:__('Change Password')}"
          >
            <div class="change-password">
              <el-form
                :model="state.form"
                :rules="state.rules"
                label-position="top"
                ref="formRef"
                @keyup.enter="onSubmit()"
              >
                <el-form-item label="{:__('Old password')}" prop="oldPassword">
                  <el-input
                    type="password"
                    v-model="state.form.oldPassword"
                    show-password
                    placeholder="{:__('Please enter your current password')}"
                  />
                </el-form-item>

                <el-form-item label="{:__('New password')}" prop="newPassword">
                  <el-input
                    type="password"
                    v-model="state.form.newPassword"
                    show-password
                    placeholder="{:__('Please input field')}{:__('New password')}"
                  />
                </el-form-item>
                <el-form-item
                  label="{:__('Confirm new password')}"
                  prop="confirmPassword"
                >
                  <el-input
                    type="password"
                    v-model="state.form.confirmPassword"
                    show-password
                    placeholder="{:__('Please input field')}{:__('Confirm new password')}"
                  />
                </el-form-item>

                <el-form-item class="submit-buttons">
                  <el-button @click="onResetForm(formRef)">
                    {:__('Reset')}
                  </el-button>
                  <el-button
                    type="primary"
                    :loading="state.formSubmitLoading"
                    @click="onSubmit()"
                  >
                    {:__('Save')}
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-col>
  </el-row>
</div>

<script>
  const App = {
    setup() {
      const { ref, reactive } = Vue;
      const user = Config.user;
      const formRef = ref();
      function validatorPassword(rule, val, callback) {
        if (!val) {
          return callback();
        }
        if (!/^(?!.*[&<>"'\n\r]).{6,32}$/.test(val)) {
          return callback(
            new Error("{:__('Please enter the correct password')}")
          );
        }
        return callback();
      }
      const state = reactive({
        formSubmitLoading: false,
        form: {
          oldPassword: "",
          newPassword: "",
          confirmPassword: "",
        },
        rules: {
          oldPassword: [
            {
              required: true,
              message: "{:__('Please input field')}{:__('Old password')}",
              trigger: "blur",
            },
          ],
          newPassword: [
            {
              required: true,
              message: "{:__('Please input field')}{:__('New password')}",
              trigger: "blur",
            },
            { validator: validatorPassword, trigger: "blur" },
          ],
          confirmPassword: [
            {
              required: true,
              message:
                "{:__('Please input field')}{:__('Confirm new password')}",
              trigger: "blur",
            },
            {
              validator: (rule, val, callback) => {
                if (state.form.newPassword || state.form.confirmPassword) {
                  if (state.form.newPassword == state.form.confirmPassword) {
                    callback();
                  } else {
                    callback(
                      new Error(
                        "{:__('The duplicate password does not match the new password')}"
                      )
                    );
                  }
                }
                callback();
              },
              trigger: "blur",
            },
          ],
        },
      });

      const onSubmit = () => {
        if (!formRef.value) return;
        formRef.value.validate((valid) => {
          if (valid) {
            state.formSubmitLoading = true;
            changePassword(state.form)
              .then((res) => {
                state.formSubmitLoading = false;
                if (res.code == 1) {
                  user.logout();
                }
              })
              .catch(() => {
                state.formSubmitLoading = false;
              });
          }
        });
      };
      return {
        state,
        formRef,
        onSubmit,
        changePassword,
      };
    },
  };
  const app = Vue.createApp(App);

  app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
  app.mount("#app");
</script>

{/block}
